
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="pmQlfNdfsrdJ"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_pmQlfNdfsrdJ = echarts.init(document.getElementById('pmQlfNdfsrdJ'), "white");
    let option_pmQlfNdfsrdJ = {
        title: {"text":"Pie-示例图",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"pie","type":"pie","data":[{"name":"袜子","value":21},{"name":"冲锋衣","value":39},{"name":"羊毛衫","value":49},{"name":"衬衫","value":9},{"name":"牛仔裤","value":3},{"name":"运动裤","value":7}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_pmQlfNdfsrdJ.setOption(option_pmQlfNdfsrdJ);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="xFconJCIAdai"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_xFconJCIAdai = echarts.init(document.getElementById('xFconJCIAdai'), "white");
    let option_xFconJCIAdai = {
        title: {"text":"Pie-显示 Label",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"pie","type":"pie","data":[{"name":"冲锋衣","value":3},{"name":"羊毛衫","value":5},{"name":"衬衫","value":0},{"name":"牛仔裤","value":5},{"name":"运动裤","value":38},{"name":"袜子","value":38}],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_xFconJCIAdai.setOption(option_xFconJCIAdai);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="KzdUUgUzYZek"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_KzdUUgUzYZek = echarts.init(document.getElementById('KzdUUgUzYZek'), "white");
    let option_KzdUUgUzYZek = {
        title: {"text":"Pie-Label 格式",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"pie","type":"pie","data":[{"name":"衬衫","value":1},{"name":"牛仔裤","value":10},{"name":"运动裤","value":5},{"name":"袜子","value":6},{"name":"冲锋衣","value":16},{"name":"羊毛衫","value":28}],"label":{"show":true,"formatter":"{b}: {c}"},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_KzdUUgUzYZek.setOption(option_KzdUUgUzYZek);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="BYbgPqmMvmKz"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_BYbgPqmMvmKz = echarts.init(document.getElementById('BYbgPqmMvmKz'), "white");
    let option_BYbgPqmMvmKz = {
        title: {"text":"Pie-Radius",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"pie","type":"pie","roseType":"","radius":["40%","75%"],"data":[{"name":"衬衫","value":11},{"name":"牛仔裤","value":2},{"name":"运动裤","value":33},{"name":"袜子","value":46},{"name":"冲锋衣","value":13},{"name":"羊毛衫","value":26}],"label":{"show":true,"formatter":"{b}: {c}"},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_BYbgPqmMvmKz.setOption(option_BYbgPqmMvmKz);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="MeCZqkSwiFvm"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_MeCZqkSwiFvm = echarts.init(document.getElementById('MeCZqkSwiFvm'), "white");
    let option_MeCZqkSwiFvm = {
        title: {"text":"Pie-玫瑰图(Area)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"pie","type":"pie","roseType":"area","radius":["30%","75%"],"data":[{"name":"衬衫","value":2},{"name":"牛仔裤","value":18},{"name":"运动裤","value":47},{"name":"袜子","value":44},{"name":"冲锋衣","value":27},{"name":"羊毛衫","value":13}],"label":{"show":true,"formatter":"{b}: {c}"},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_MeCZqkSwiFvm.setOption(option_MeCZqkSwiFvm);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="CiCXcLmCrapG"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_CiCXcLmCrapG = echarts.init(document.getElementById('CiCXcLmCrapG'), "white");
    let option_CiCXcLmCrapG = {
        title: {"text":"Pie-玫瑰图(Radius)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"pie","type":"pie","roseType":"radius","radius":["30%","75%"],"data":[{"name":"羊毛衫","value":33},{"name":"衬衫","value":46},{"name":"牛仔裤","value":20},{"name":"运动裤","value":23},{"name":"袜子","value":3},{"name":"冲锋衣","value":37}],"label":{"show":true,"formatter":"{b}: {c}"},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_CiCXcLmCrapG.setOption(option_CiCXcLmCrapG);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="fNkhjbTsaqti"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_fNkhjbTsaqti = echarts.init(document.getElementById('fNkhjbTsaqti'), "white");
    let option_fNkhjbTsaqti = {
        title: {"text":"Pie-玫瑰图(Area/Radius)",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"area","type":"pie","roseType":"area","center":["25%","50%"],"radius":["30%","75%"],"data":[{"name":"冲锋衣","value":41},{"name":"羊毛衫","value":2},{"name":"衬衫","value":41},{"name":"牛仔裤","value":9},{"name":"运动裤","value":33},{"name":"袜子","value":43}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"radius","type":"pie","roseType":"radius","center":["75%","50%"],"radius":["30%","75%"],"data":[{"name":"衬衫","value":28},{"name":"牛仔裤","value":36},{"name":"运动裤","value":46},{"name":"袜子","value":7},{"name":"冲锋衣","value":40},{"name":"羊毛衫","value":3}],"label":{"show":true,"formatter":"{b}: {c}"},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_fNkhjbTsaqti.setOption(option_fNkhjbTsaqti);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="lNlSYDHcVjVB"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_lNlSYDHcVjVB = echarts.init(document.getElementById('lNlSYDHcVjVB'), "white");
    let option_lNlSYDHcVjVB = {
        title: {"text":"Pie-饼中饼",},
        tooltip: {},
        legend: {},
        series: [
        {"name":"area","type":"pie","roseType":"area","radius":["50%","55%"],"data":[{"name":"牛仔裤","value":43},{"name":"运动裤","value":5},{"name":"袜子","value":48},{"name":"冲锋衣","value":25},{"name":"羊毛衫","value":1},{"name":"衬衫","value":2}],"label":{"show":true,"formatter":"{b}: {c}"},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"radius","type":"pie","roseType":"radius","radius":["0%","45%"],"data":[{"name":"羊毛衫","value":35},{"name":"衬衫","value":15},{"name":"牛仔裤","value":7},{"name":"运动裤","value":37},{"name":"袜子","value":10},{"name":"冲锋衣","value":10}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_lNlSYDHcVjVB.setOption(option_lNlSYDHcVjVB);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
